CountrySelector API
CountrySelector is a button component for selecting a country.
Usage Example
Import component
import { CountrySelector } from 'react-international-phone';
Use by providing the selectedCountry and onSelect callback.
<CountrySelector
selectedCountry="ua"
onSelect={({ iso2 }) => setCountry(iso2)}
/>
Output:
Properties
selectedCountry
Selected country (iso2).
- Type:
CountryIso2 - Default:
undefined
onSelect
Callback that calls on country select
- Type:
(country: ParsedCountry) => void - Default:
undefined
disabled
Is CountrySelector disabled
- Type:
boolean - Default:
undefined
hideDropdown
Hide dropdown icon and make CountrySelector not clickable
- Type:
boolean - Default:
undefined
renderButtonWrapper
Render function for custom button wrapper. children and rootProps should be passed to button props. rootProps contains a click handler and properties that are required for accessibility. rootProps should be spread like <button {...rootProps} />
- Type:
(props: { children: React.ReactNode; rootProps: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactNode - Default:
undefined
Style properties (CountrySelectorStyleProps type)
| Prop | Type | Description |
|---|---|---|
| style | CSSProperties | Custom styles for CountrySelector container |
| className | string | Custom className for CountrySelector container |
| buttonStyle | CSSProperties | Custom styles for CountrySelector button |
| buttonClassName | string | Custom className for CountrySelector button |
| buttonContentWrapperStyle | CSSProperties | Custom styles for CountrySelector button content wrapper |
| buttonContentWrapperClassName | string | Custom className for CountrySelector button content wrapper |
| flagStyle | dropdownStyleProps | Custom styles for CountrySelector flag |
| flagClassName | string | Custom className for CountrySelector flag |
| dropdownArrowStyle | dropdownStyleProps | Custom styles for CountrySelector dropdown arrow |
| dropdownArrowClassName | string | Custom className for CountrySelector dropdown arrow |
| dropdownStyleProps | CountrySelectorDropdownStyleProps | Style properties for CountrySelector dropdown |
CSS variables
| Variable | Default value |
|---|---|
| --react-international-phone-country-selector-background-color | --react-international-phone-background-color |
| --react-international-phone-country-selector-background-color-hover | whitesmoke |
| --react-international-phone-disabled-country-selector-background-color | --react-international-phone-disabled-background-color |
| --react-international-phone-country-selector-border-color | gainsboro |
| --react-international-phone-country-selector-arrow-size | 4px |
| --react-international-phone-country-selector-arrow-color | #777 |
| --react-international-phone-disabled-country-selector-arrow-color | #999 |